<template>
  <div class="china-map-container">
    <div ref="chinaMap" class="map-chart"></div>
    <div v-if="tooltipData" class="map-tooltip" :style="{left: tooltipPosition.x + 'px', top: tooltipPosition.y + 'px'}">
      <div class="tooltip-title">{{ tooltipData.name }}</div>
      <div class="tooltip-content">
        <div class="tooltip-item">
          <span class="label">技术工岗位:</span>
          <span class="value">{{ tooltipData.technicalJobs || 0 }}个</span>
        </div>
        <div class="tooltip-item">
          <span class="label">技术工报名:</span>
          <span class="value">{{ tooltipData.technicalApplies || 0 }}人</span>
        </div>
        <div class="tooltip-item">
          <span class="label">普通工岗位:</span>
          <span class="value">{{ tooltipData.generalJobs || 0 }}个</span>
        </div>
        <div class="tooltip-item">
          <span class="label">普通工报名:</span>
          <span class="value">{{ tooltipData.generalApplies || 0 }}人</span>
        </div>
        <div class="tooltip-item">
          <span class="label">管理岗岗位:</span>
          <span class="value">{{ tooltipData.managementJobs || 0 }}个</span>
        </div>
        <div class="tooltip-item">
          <span class="label">管理岗报名:</span>
          <span class="value">{{ tooltipData.managementApplies || 0 }}人</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import 'echarts-map/js/china.js'

export default {
  name: 'ChinaMap',
  props: {
    jobData: {
      type: Array,
      default: () => []
    },
    applyData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      chart: null,
      tooltipData: null,
      tooltipPosition: { x: 0, y: 0 }
    }
  },
  watch: {
    jobData: {
      handler() {
        this.updateChart();
      },
      deep: true
    },
    applyData: {
      handler() {
        this.updateChart();
      },
      deep: true
    }
  },
  mounted() {
    this.initChart();
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
    }
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.chinaMap);
      this.updateChart();

      // 鼠标移动事件
      this.chart.on('mousemove', (params) => {
        if (params.componentType === 'series') {
          this.tooltipData = params.data;
          // 调整tooltip位置，确保不超出边界
          this.adjustTooltipPosition(params.event);
        }
      });

      // 鼠标离开事件
      this.chart.on('mouseout', (params) => {
        if (params.componentType === 'series') {
          this.tooltipData = null;
        }
      });
    },
    adjustTooltipPosition(event) {
      this.$nextTick(() => {
        const tooltip = document.querySelector('.map-tooltip');
        if (!tooltip) return;

        // 获取tooltip的尺寸
        const tooltipWidth = tooltip.offsetWidth;
        const tooltipHeight = tooltip.offsetHeight;

        // 获取容器尺寸
        const container = this.$refs.chinaMap;
        const containerRect = container.getBoundingClientRect();

        // 初始位置
        let x = event.offsetX + 10;
        let y = event.offsetY + 10;

        // 检查右侧是否超出边界
        if (x + tooltipWidth > containerRect.width) {
          x = event.offsetX - tooltipWidth - 10;
        }

        // 检查底部是否超出边界
        if (y + tooltipHeight > containerRect.height) {
          y = event.offsetY - tooltipHeight - 10;
        }

        // 确保不会小于0
        x = Math.max(0, x);
        y = Math.max(0, y);

        this.tooltipPosition = { x, y };
      });
    },
    updateChart() {
      if (!this.chart) return;

      // 处理数据
      const mapData = this.processData();

      // 计算最大值用于颜色映射
      const maxJobs = Math.max(...mapData.map(item => item.totalJobs), 1);

      const option = {
        title: {
          text: '全国岗位分布图',
          left: 'center',
          textStyle: {
            color: '#333'
          }
        },
        tooltip: {
          trigger: 'item',
          show: false // 使用自定义tooltip
        },
        visualMap: {
          min: 0,
          max: maxJobs,
          inRange: {
            color: ['#ffffff', 'rgba(185,103,238,0.8)']
          },
          calculable: true,
          orient: 'horizontal',
          left: 'left',
          bottom: 30,
          textStyle: {
            color: '#333'
          }
        },
        series: [
          {
            name: '岗位分布',
            type: 'map',
            map: 'china',
            roam: false,
            zoom: 1.2,
            label: {
              show: true,
              color: '#333',
              fontSize: 10
            },
            emphasis: {
              label: {
                show: true,
                color: '#fff'
              },
              itemStyle: {
                areaColor: '#18b7b2'
              }
            },
            itemStyle: {
              areaColor: '#66a0e1', // 淡蓝色
              borderColor: 'rgba(255,215,0,0.75)', // 金黄色描边
              borderWidth: 1,
              shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影颜色
              shadowBlur: 10, // 阴影模糊度
              shadowOffsetX: 1, // 阴影水平偏移
              shadowOffsetY: 1 // 阴影垂直偏移
            },
            data: mapData
          }
        ]
      };

      this.chart.setOption(option, true);
    },
    processData() {
      // 城市到省份的映射
      const cityToProvince = {
        // 直辖市
        '北京': '北京',
        '上海': '上海',
        '天津': '天津',
        '重庆': '重庆',

        // 河北省
        '石家庄': '河北',
        '唐山': '河北',
        '秦皇岛': '河北',
        '邯郸': '河北',
        '邢台': '河北',
        '保定': '河北',
        '张家口': '河北',
        '承德': '河北',
        '沧州': '河北',
        '廊坊': '河北',
        '衡水': '河北',

        // 山西省
        '太原': '山西',
        '大同': '山西',
        '阳泉': '山西',
        '长治': '山西',
        '晋城': '山西',
        '朔州': '山西',
        '晋中': '山西',
        '运城': '山西',
        '忻州': '山西',
        '临汾': '山西',
        '吕梁': '山西',

        // 内蒙古自治区
        '呼和浩特': '内蒙古',
        '包头': '内蒙古',
        '乌海': '内蒙古',
        '赤峰': '内蒙古',
        '通辽': '内蒙古',
        '鄂尔多斯': '内蒙古',
        '呼伦贝尔': '内蒙古',
        '巴彦淖尔': '内蒙古',
        '乌兰察布': '内蒙古',
        '兴安盟': '内蒙古',
        '锡林郭勒盟': '内蒙古',
        '阿拉善盟': '内蒙古',

        // 辽宁省
        '沈阳': '辽宁',
        '大连': '辽宁',
        '鞍山': '辽宁',
        '抚顺': '辽宁',
        '本溪': '辽宁',
        '丹东': '辽宁',
        '锦州': '辽宁',
        '营口': '辽宁',
        '阜新': '辽宁',
        '辽阳': '辽宁',
        '盘锦': '辽宁',
        '铁岭': '辽宁',
        '朝阳': '辽宁',
        '葫芦岛': '辽宁',

        // 吉林省
        '长春': '吉林',
        '吉林': '吉林',
        '四平': '吉林',
        '辽源': '吉林',
        '通化': '吉林',
        '白山': '吉林',
        '松原': '吉林',
        '白城': '吉林',
        '延边': '吉林',

        // 黑龙江省
        '哈尔滨': '黑龙江',
        '齐齐哈尔': '黑龙江',
        '鸡西': '黑龙江',
        '鹤岗': '黑龙江',
        '双鸭山': '黑龙江',
        '大庆': '黑龙江',
        '伊春': '黑龙江',
        '佳木斯': '黑龙江',
        '七台河': '黑龙江',
        '牡丹江': '黑龙江',
        '黑河': '黑龙江',
        '绥化': '黑龙江',
        '大兴安岭': '黑龙江',

        // 江苏省
        '南京': '江苏',
        '无锡': '江苏',
        '徐州': '江苏',
        '常州': '江苏',
        '苏州': '江苏',
        '南通': '江苏',
        '连云港': '江苏',
        '淮安': '江苏',
        '盐城': '江苏',
        '扬州': '江苏',
        '镇江': '江苏',
        '泰州': '江苏',
        '宿迁': '江苏',

        // 浙江省
        '杭州': '浙江',
        '宁波': '浙江',
        '温州': '浙江',
        '嘉兴': '浙江',
        '湖州': '浙江',
        '绍兴': '浙江',
        '金华': '浙江',
        '衢州': '浙江',
        '舟山': '浙江',
        '台州': '浙江',
        '丽水': '浙江',

        // 安徽省
        '合肥': '安徽',
        '芜湖': '安徽',
        '蚌埠': '安徽',
        '淮南': '安徽',
        '马鞍山': '安徽',
        '淮北': '安徽',
        '铜陵': '安徽',
        '安庆': '安徽',
        '黄山': '安徽',
        '滁州': '安徽',
        '阜阳': '安徽',
        '宿州': '安徽',
        '巢湖': '安徽',
        '六安': '安徽',
        '亳州': '安徽',
        '池州': '安徽',
        '宣城': '安徽',

        // 福建省
        '福州': '福建',
        '厦门': '福建',
        '莆田': '福建',
        '三明': '福建',
        '泉州': '福建',
        '漳州': '福建',
        '南平': '福建',
        '龙岩': '福建',
        '宁德': '福建',

        // 江西省
        '南昌': '江西',
        '景德镇': '江西',
        '萍乡': '江西',
        '九江': '江西',
        '新余': '江西',
        '鹰潭': '江西',
        '赣州': '江西',
        '吉安': '江西',
        '宜春': '江西',
        '抚州': '江西',
        '上饶': '江西',

        // 山东省
        '济南': '山东',
        '青岛': '山东',
        '淄博': '山东',
        '枣庄': '山东',
        '东营': '山东',
        '烟台': '山东',
        '潍坊': '山东',
        '济宁': '山东',
        '泰安': '山东',
        '威海': '山东',
        '日照': '山东',
        '莱芜': '山东',
        '临沂': '山东',
        '德州': '山东',
        '聊城': '山东',
        '滨州': '山东',
        '菏泽': '山东',

        // 河南省
        '郑州': '河南',
        '开封': '河南',
        '洛阳': '河南',
        '平顶山': '河南',
        '安阳': '河南',
        '鹤壁': '河南',
        '新乡': '河南',
        '焦作': '河南',
        '濮阳': '河南',
        '许昌': '河南',
        '漯河': '河南',
        '三门峡': '河南',
        '南阳': '河南',
        '商丘': '河南',
        '信阳': '河南',
        '周口': '河南',
        '驻马店': '河南',

        // 湖北省
        '武汉': '湖北',
        '黄石': '湖北',
        '十堰': '湖北',
        '宜昌': '湖北',
        '襄樊': '湖北',
        '鄂州': '湖北',
        '荆门': '湖北',
        '孝感': '湖北',
        '荆州': '湖北',
        '黄冈': '湖北',
        '咸宁': '湖北',
        '随州': '湖北',
        '恩施': '湖北',
        '仙桃': '湖北',
        '潜江': '湖北',
        '天门': '湖北',
        '神农架': '湖北',

        // 湖南省
        '长沙': '湖南',
        '株洲': '湖南',
        '湘潭': '湖南',
        '衡阳': '湖南',
        '邵阳': '湖南',
        '岳阳': '湖南',
        '常德': '湖南',
        '张家界': '湖南',
        '益阳': '湖南',
        '郴州': '湖南',
        '永州': '湖南',
        '怀化': '湖南',
        '娄底': '湖南',
        '湘西': '湖南',

        // 广东省
        '广州': '广东',
        '韶关': '广东',
        '深圳': '广东',
        '珠海': '广东',
        '汕头': '广东',
        '佛山': '广东',
        '江门': '广东',
        '湛江': '广东',
        '茂名': '广东',
        '肇庆': '广东',
        '惠州': '广东',
        '梅州': '广东',
        '汕尾': '广东',
        '河源': '广东',
        '阳江': '广东',
        '清远': '广东',
        '东莞': '广东',
        '中山': '广东',
        '潮州': '广东',
        '揭阳': '广东',
        '云浮': '广东',

        // 广西壮族自治区
        '南宁': '广西',
        '柳州': '广西',
        '桂林': '广西',
        '梧州': '广西',
        '北海': '广西',
        '防城港': '广西',
        '钦州': '广西',
        '贵港': '广西',
        '玉林': '广西',
        '百色': '广西',
        '贺州': '广西',
        '河池': '广西',
        '来宾': '广西',
        '崇左': '广西',

        // 海南省
        '海口': '海南',
        '三亚': '海南',
        '五指山': '海南',
        '琼海': '海南',
        '儋州': '海南',
        '文昌': '海南',
        '万宁': '海南',
        '东方': '海南',
        '定安': '海南',
        '屯昌': '海南',
        '澄迈': '海南',
        '临高': '海南',
        '白沙': '海南',
        '昌江': '海南',
        '乐东': '海南',
        '陵水': '海南',
        '保亭': '海南',
        '琼中': '海南',

        // 四川省
        '成都': '四川',
        '自贡': '四川',
        '攀枝花': '四川',
        '泸州': '四川',
        '德阳': '四川',
        '绵阳': '四川',
        '广元': '四川',
        '遂宁': '四川',
        '内江': '四川',
        '乐山': '四川',
        '南充': '四川',
        '眉山': '四川',
        '宜宾': '四川',
        '广安': '四川',
        '达州': '四川',
        '雅安': '四川',
        '巴中': '四川',
        '资阳': '四川',
        '阿坝': '四川',
        '甘孜': '四川',
        '凉山': '四川',

        // 贵州省
        '贵阳': '贵州',
        '六盘水': '贵州',
        '遵义': '贵州',
        '安顺': '贵州',
        '铜仁': '贵州',
        '黔西南': '贵州',
        '毕节': '贵州',
        '黔东南': '贵州',
        '黔南': '贵州',

        // 云南省
        '昆明': '云南',
        '曲靖': '云南',
        '玉溪': '云南',
        '保山': '云南',
        '昭通': '云南',
        '丽江': '云南',
        '思茅': '云南',
        '临沧': '云南',
        '楚雄': '云南',
        '红河': '云南',
        '文山': '云南',
        '西双版纳': '云南',
        '大理': '云南',
        '德宏': '云南',
        '怒江': '云南',
        '迪庆': '云南',

        // 西藏自治区
        '拉萨': '西藏',
        '昌都': '西藏',
        '山南': '西藏',
        '日喀则': '西藏',
        '那曲': '西藏',
        '阿里': '西藏',
        '林芝': '西藏',

        // 陕西省
        '西安': '陕西',
        '铜川': '陕西',
        '宝鸡': '陕西',
        '咸阳': '陕西',
        '渭南': '陕西',
        '延安': '陕西',
        '汉中': '陕西',
        '榆林': '陕西',
        '安康': '陕西',
        '商洛': '陕西',

        // 甘肃省
        '兰州': '甘肃',
        '嘉峪关': '甘肃',
        '金昌': '甘肃',
        '白银': '甘肃',
        '天水': '甘肃',
        '武威': '甘肃',
        '张掖': '甘肃',
        '平凉': '甘肃',
        '酒泉': '甘肃',
        '庆阳': '甘肃',
        '定西': '甘肃',
        '陇南': '甘肃',
        '临夏': '甘肃',
        '甘南': '甘肃',

        // 青海省
        '西宁': '青海',
        '海东': '青海',
        '海北': '青海',
        '黄南': '青海',
        '海南': '青海',
        '果洛': '青海',
        '玉树': '青海',
        '海西': '青海',

        // 宁夏回族自治区
        '银川': '宁夏',
        '石嘴山': '宁夏',
        '吴忠': '宁夏',
        '固原': '宁夏',
        '中卫': '宁夏',

        // 新疆维吾尔自治区
        '乌鲁木齐': '新疆',
        '克拉玛依': '新疆',
        '吐鲁番': '新疆',
        '哈密': '新疆',
        '昌吉': '新疆',
        '博尔塔拉': '新疆',
        '巴音郭楞': '新疆',
        '阿克苏': '新疆',
        '克孜勒苏': '新疆',
        '喀什': '新疆',
        '和田': '新疆',
        '伊犁': '新疆',
        '塔城': '新疆',
        '阿勒泰': '新疆',
        '石河子': '新疆',
        '阿拉尔': '新疆',
        '图木舒克': '新疆',
        '五家渠': '新疆',

        // 台湾省
        '台北': '台湾',
        '高雄': '台湾',
        '基隆': '台湾',
        '台中': '台湾',
        '台南': '台湾',
        '新竹': '台湾',
        '嘉义': '台湾',
        '宜兰': '台湾',
        '桃园': '台湾',
        '苗栗': '台湾',
        '彰化': '台湾',
        '南投': '台湾',
        '云林': '台湾',
        '屏东': '台湾',
        '台东': '台湾',
        '花莲': '台湾',
        '澎湖': '台湾',

        // 香港特别行政区
        '香港': '香港',

        // 澳门特别行政区
        '澳门': '澳门'
      };

      // 按省份统计岗位数据
      const jobStats = {};
      this.jobData.forEach(job => {
        // 处理岗位可能在多个地点的情况，按分号或逗号分割
        const locations = (job.location || '未知').split(/[;,；，]/).map(loc => loc.trim()).filter(loc => loc);

        locations.forEach(location => {
          // 获取省份名称
          const province = cityToProvince[location] || location;

          if (!jobStats[province]) {
            jobStats[province] = {
              name: province,
              totalJobs: 0,
              technicalJobs: 0,
              generalJobs: 0,
              managementJobs: 0,
              technicalApplies: 0,
              generalApplies: 0,
              managementApplies: 0,
              value: 0
            };
          }

          // 累加岗位数量
          jobStats[province].totalJobs += job.positionNumber || 0;
          jobStats[province].value += job.positionNumber || 0;

          // 根据岗位性质分类
          const nature = job.positionNature || '';
          if (nature.includes('技术')) {
            jobStats[province].technicalJobs += job.positionNumber || 0;
          } else if (nature.includes('普通')) {
            jobStats[province].generalJobs += job.positionNumber || 0;
          } else if (nature.includes('管理')) {
            jobStats[province].managementJobs += job.positionNumber || 0;
          }
        });
      });

      // 按省份统计报名数据
      const applyStats = {};
      this.applyData.forEach(apply => {
        // 处理岗位可能在多个地点的情况，按分号或逗号分割
        const locations = (apply.location || '未知').split(/[;,；，]/).map(loc => loc.trim()).filter(loc => loc);

        locations.forEach(location => {
          // 获取省份名称
          const province = cityToProvince[location] || location;

          if (!applyStats[province]) {
            applyStats[province] = {
              technicalApplies: 0,
              generalApplies: 0,
              managementApplies: 0
            };
          }

          // 根据岗位性质分类统计报名
          const nature = apply.positionNature || '';
          if (nature.includes('技术')) {
            applyStats[province].technicalApplies += 1;
          } else if (nature.includes('普通')) {
            applyStats[province].generalApplies += 1;
          } else if (nature.includes('管理')) {
            applyStats[province].managementApplies += 1;
          }
        });
      });

      // 合并数据
      const result = [];
      for (const province in jobStats) {
        const jobItem = jobStats[province];
        const applyItem = applyStats[province] || {
          technicalApplies: 0,
          generalApplies: 0,
          managementApplies: 0
        };

        result.push({
          name: province,
          totalJobs: jobItem.totalJobs,
          technicalJobs: jobItem.technicalJobs,
          generalJobs: jobItem.generalJobs,
          managementJobs: jobItem.managementJobs,
          technicalApplies: applyItem.technicalApplies,
          generalApplies: applyItem.generalApplies,
          managementApplies: applyItem.managementApplies,
          value: jobItem.value
        });
      }

      // 添加只有报名数据但没有岗位数据的省份
      for (const province in applyStats) {
        if (!jobStats[province]) {
          const applyItem = applyStats[province];
          result.push({
            name: province,
            totalJobs: 0,
            technicalJobs: 0,
            generalJobs: 0,
            managementJobs: 0,
            technicalApplies: applyItem.technicalApplies,
            generalApplies: applyItem.generalApplies,
            managementApplies: applyItem.managementApplies,
            value: 0
          });
        }
      }

      return result;
    }
  }
}
</script>

<style scoped>
.china-map-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.map-chart {
  width: 100%;
  height: 300px;
}

.map-tooltip {
  position: absolute;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 4px;
  padding: 10px;
  color: white;
  font-size: 12px;
  pointer-events: none;
  z-index: 9999;
  min-width: 100px;
  box-sizing: border-box;
}

.tooltip-title {
  font-weight: bold;
  margin-bottom: 8px;
  font-size: 14px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 4px;
}

.tooltip-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.tooltip-item .label {
  margin-right: 10px;
}

.tooltip-item .value {
  font-weight: bold;
}
</style>
